import React, { Component } from "react";
import { AddtheNurse } from "../../utils/api";
import { dateFormat } from '../../utils';
import "./index.scss";
import {
    Form,
    Input,
    DatePicker,
    InputNumber,
    Button,
    Select,
} from "antd";
const validateMessages = {
    required: "${label} is required!",
    types: {
        email: "${label} is not validate email!",
        number: "${label} is not a validate number!",
    },
    number: {
        range: "${label} must be between ${min} and ${max}",
    },
};
export const list = [
    {
        title: "护士",
        value: 3,
    },
    {
        title: "医师",
        value: 1,
    },
    {
        title: "主管护士",
        value: 2,
    },
];
export const areas = [
    {
        title: "妇科",
        value: "妇科",
    },
    {
        title: "儿科",
        value: "儿科",
    },
    {
        title: "助产科",
        value: "助产科",
    },
    {
        title: "急诊科",
        value: "急诊科",
    },
    {
        title: "精神科",
        value: "精神科",
    },
];
export const academic = [
    {
        title: "中专学历",
        value: "中专学历",
    },
    {
        title: "专科学历",
        value: "专科学历",
    },
    {
        title: "本科学历",
        value: "本科学历",
    },
    {
        title: "硕士学历",
        value: "硕士学历",
    },
    {
        title: "博士学历",
        value: "博士学历",
    },
];
export const sex = [
    {
        title: "男",
        value: "男",
    },
    {
        title: "女",
        value: "女",
    },
];
export const phoneReg = /^1(3|5|6|7|8|9)\d{9}$/;

const formItemLayout = {
    labelCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 8,
        },
    },
    wrapperCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 16,
        },
    },
};
const config = {
    rules: [
        {
            type: "object",
            required: true,
            message: "Please select time!",
        },
    ],
};
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
{
    /* 护士 */
}
const Dome = () => {
    const [form] = Form.useForm();
    // 调用接口 插入数据
    let onFinish = (value) => {
        // 转换日期格式
        let dates = dateFormat(value.date)
        value.date = dates
        AddtheNurse(value).then(res => {
            if (res.type) {
                form.resetFields();
            }
        })
    };

    return (
        <Form
            {...layout}
            name="nest-messages"
            {...formItemLayout}
            onFinish={onFinish}
            validateMessages={validateMessages}
            style={{ width: "500px" }}
            form={form}
        >
            <Form.Item name="name" label="姓名" rules={[{ required: true }]}>
                <Input style={{ width: "450px" }} />
            </Form.Item>
            <Form.Item
                name="age"
                label="年龄"
                rules={[{ type: "number", min: 20, max: 60, required: true }]}
            >
                <InputNumber style={{ width: "180px" }} />
            </Form.Item>
            <Form.Item name="sex" label="性别" rules={[{ required: true }]}>
                <Select placeholder="请选择性别">
                    {sex.map((item, i) => {
                        return (
                            <Select.Option value={item.value} key={i}>
                                {" "}
                                {item.title}{" "}
                            </Select.Option>
                        );
                    })}
                </Select>
            </Form.Item>
            <Form.Item
                name="phone"
                label="电话"
                rules={[
                    { required: true },
                    {
                        pattern: phoneReg,
                        message: "请输入正确的手机号码",
                    },
                ]}
            >
                <Input style={{ width: "180px" }} />
            </Form.Item>
            <Form.Item
                name="address"
                label="地址"
                rules={[{ type: "string", min: 0, max: 99, required: true }]}
            >
                <Input style={{ width: "450px" }} />
            </Form.Item>
            <Form.Item
                name="profession"
                label="专业"
                rules={[{ type: "string", min: 0, max: 99, required: true }]}
            >
                <Input style={{ width: "450px" }} />
            </Form.Item>
            <Form.Item
                label="职位"
                name="type"
                rules={[{ required: true, message: "请选择" }]}
            >
                <Select placeholder="请选择职位">
                    {list.map((item, i) => {
                        return (
                            <Select.Option value={item.value} key={i}>
                                {" "}
                                {item.title}{" "}
                            </Select.Option>
                        );
                    })}
                </Select>
            </Form.Item>
            <Form.Item
                label="科室"
                name="office"
                rules={[{ required: true, message: "请选择科室" }]}
            >
                <Select placeholder="请选择">
                    {areas.map((item, i) => {
                        return (
                            <Select.Option value={item.value} key={i}>
                                {" "}
                                {item.title}{" "}
                            </Select.Option>
                        );
                    })}
                </Select>
            </Form.Item>
            <Form.Item
                name="education"
                label="学历"
                rules={[
                    {
                        required: true,
                        message: "Please select your habitual residence!",
                    },
                ]}
            >
                <Select placeholder="请选择学历">
                    {academic.map((item, i) => {
                        return (
                            <Select.Option value={item.title} key={i}>
                                {" "}
                                {item.title}{" "}
                            </Select.Option>
                        );
                    })}
                </Select>
            </Form.Item>

            <Form.Item name="date" label="入职时间" {...config}>
                <DatePicker />
            </Form.Item>

            <Form.Item
                wrapperCol={{ ...layout.wrapperCol, offset: 8 }}
                style={{ width: "350px" }}
            >
                <Button type="primary" htmlType="submit">
                    提交
        </Button>
                <Button
                    onClick={() => {
                        form.resetFields();
                    }}
                >
                    重置
        </Button>
            </Form.Item>
        </Form>
    );
};

export default class index extends Component {
    render() {
        return (
            <div>
                <h4 style={{ paddingLeft: "130px" }}>新增公告</h4>
                <Dome />
            </div>
        );
    }
}
